<script setup lang="ts">
import {ref} from "vue";
import {onShow,onReachBottom} from "@dcloudio/uni-app";
import {usePageRecordApi} from "@/services/api";
import {Page} from "@/interfaces/base";
import {PageRecordReqVO, PageRecordRespVO} from "@/interfaces/book";
import {useStore} from "vuex";
import BookInfo from "@/components/book-info/book-info.vue";

const store = useStore()
const list = ref<string[]>(['取消预约','已预约','已完成'])
const status = ref<string>('loadmore')
const resultList = ref<Page<PageRecordRespVO>>({
  list: [],
  total: 0
})
const pageReq = ref<PageRecordReqVO>({
  username: store.getters["auth/getUsername"],
  status:0,
  current: 1,
  size: 10
})
const sectionChange = (index:number) => {
  resultList.value.list = []
  pageReq.value.status = index;
  init()
}
const init = async ()=>{
  const {data: pageRecord} = await usePageRecordApi(pageReq.value)
  if (pageRecord.list.length > 0) {
    resultList.value.list = [...resultList.value.list, ...pageRecord.list]
    resultList.value.total += pageRecord.total
  } else {
    status.value = 'nomore'
  }
}
onShow(()=>{
  init()
})
onReachBottom(()=>{
  status.value = 'loading';
  pageReq.value.current = ++ pageReq.value.current;
  init()
})
</script>

<template>
  <view class="container">
    <u-subsection :list="list" :current="pageReq.status" fontSize="28rpx" @change="sectionChange"></u-subsection>
    <view class="result" v-for="(result,index) in resultList.list" :key="index">
      <book-info :book-info="result"></book-info>
      <u-divider lineColor="#999999"></u-divider>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container{
  .result{
    display: flex;
    flex-direction: column;
    padding: 36rpx;
  }
}
</style>